<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" th:href="@{/styles.css}">
    <script>
        function validatePassword() {
            var password = document.getElementById("newPassword").value;
            var regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]+$/;
            if (!regex.test(password)) {
                alert("密码必须包含英文字母、数字和特殊字符！");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<div class="container">
    <h2>修改密码</h2>
    <div class="message error" th:if="${error}">
        <p th:text="${error}"></p>
    </div>
    <div class="message success" th:if="${success}">
        <p th:text="${success}"></p>
    </div>
    <form action="/doChangePassword" method="post" onsubmit="return validatePassword()">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="oldPassword">旧密码:</label>
            <input type="password" id="oldPassword" name="oldPassword" required>
        </div>
        <div class="form-group">
            <label for="newPassword">新密码:</label>
            <input type="password" id="newPassword" name="newPassword" required>
        </div>
        <button type="submit">修改密码</button>
    </form>
    <div class="links-container">
        <a href="/login">返回登录</a>
    </div>
</div>
</body>
</html>